<template>
<!-- 客服管理 -->
    <div>
                <div class="block">
            <el-row>
                <el-col :span="3" style="margin-right:10px">
                        <el-select v-model="setupCsm" placeholder="全部客服组" style="width:100%">
                            <el-option
                            v-for="item in setupCsmOptions"
                            :key="item.group_no"
                            :label="item.g_name"
                            :value="item.group_no">
                            </el-option>
                        </el-select>
                </el-col>
                 <el-col :span="8">
                    <el-input placeholder="客服昵称/姓名/工号/手机号码" style="width:70%" v-model="search">
                    <el-button  slot="append"  id="search"  @click="searchsj">搜索</el-button >
                    </el-input>
                </el-col>
                 <el-col :span="5" style="float:right;">
                    <el-button type="primary" @click="dialogaddcsm = true" style="margin-right:10px;">添加客服</el-button>

                    <el-dialog
                        title="添加客服"
                        :visible.sync="dialogaddcsm"
                        width="500px"
                        align="left"
                    >
                <el-form :model="addcsm" :rules="addrules" ref="add_csm">
                    <el-form-item label="客服昵称" prop="c_s_nickname">
                        <el-input type="text" v-model="addcsm.c_s_nickname" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="真实姓名" prop="c_s_name">
                        <el-input type="text" v-model="addcsm.c_s_name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="客服账号" prop="c_s_account">
                        <el-input v-model="addcsm.c_s_account"></el-input>
                    </el-form-item>
                    <el-form-item label="初始密码" prop="c_s_password">
                        <el-input v-model="addcsm.c_s_password"></el-input>
                    </el-form-item>
                    <el-form-item label="所在分组" prop="group_no">
                       <el-select v-model="setupAddCsmID" placeholder="请选择分组，默认不分组" style="width:100%">
                            <el-option
                            v-for="item in setupCsmOptions"
                            :key="item.group_no"
                            :label="item.g_name"
                            :value="item.group_no">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogupdate = false">取 消</el-button>
                  <el-button type="primary" @click="addcsmsj('add_csm')">确 定</el-button
                  >
                </div>
              </el-dialog>
                      <el-button>导出当前数据</el-button>
                </el-col>
            </el-row>
            <el-row style="margin-top:10px">
                <el-table
                    ref="multipleTable"
                    :header-cell-style="{background:'#e5f1ff',color:'#606266'}"
                    :data="setupCsmData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                    tooltip-effect="dark"
                    style="width: 100%"
                    >

                    <el-table-column
                    prop="c_s_account"
                    label="账号"
                    width="220" 
                    align="center">
                    </el-table-column>

                    <el-table-column
                    prop="c_s_nickname"
                    label="客服昵称"
                    width="150" 
                     align="center">
                    </el-table-column>
                     <el-table-column
                    prop="c_s_name"
                    label="客服姓名"
                    width="180" 
                     align="center">
                    </el-table-column>
                     <el-table-column
                    prop="g_name"
                    label="客服分组"
                    width="220" 
                     align="center">
                    </el-table-column>
                    
                      <el-table-column
                   
                    label="客服状态"
                    width="120" 
                     align="center"
                      >
                        <template>
                                <Open />
                        </template>
                       
                    </el-table-column>
                     <el-table-column
                    prop="chaoz"
                    label="操作"
                    align="center">
                        <template slot-scope="scope"> 
                            <el-button type="text" size="small" @click="updatecsmid(scope.$index)">编辑</el-button>

                                            



                            <el-button type="text" size="small" @click="deletecsmid(scope.$index)" >删除</el-button>

                           
                        </template>
                    </el-table-column>
                </el-table>
                <div>
                    <el-dialog
                                    title="删除确认"
                                    :visible.sync="dialogdeletecsm"
                                    width="500px"
                                >
                                    <el-form>
                                    <el-form-item style="margin: 0px">
                                        <label> 确定删除此信息吗？</label>
                                    </el-form-item>
                                    </el-form>
                                    <div slot="footer" class="dialog-footer">
                                    <el-button @click="dialogdeletecsm = false">取 消</el-button>
                                    <el-button type="primary" @click="deletecsm()">确 定</el-button
                                    >
                                    </div>
                                </el-dialog>

                                    <el-dialog
                                            title="修改客服"
                                            :visible.sync="dialogupdatecsm"
                                            width="500px"
                                            align="left"
                                            >
                                    <el-form :model="setupCsmUpdate" :rules="updaterules" ref="update_csm">
                                        <el-form-item label="客服昵称" prop="c_s_nickname">
                                            <el-input type="text" v-model="setupCsmUpdate.c_s_nickname" autocomplete="off"></el-input>
                                        </el-form-item>
                                        <el-form-item label="真实姓名" prop="c_s_name">
                                            <el-input type="text" v-model="setupCsmUpdate.c_s_name" autocomplete="off"></el-input>
                                        </el-form-item>
                                        <el-form-item label="客服账号" prop="c_s_account">
                                            <el-input v-model="setupCsmUpdate.c_s_account"></el-input>
                                        </el-form-item>
                                        <el-form-item label="初始密码" prop="c_s_password">
                                            <el-input v-model="setupCsmUpdate.c_s_password"></el-input>
                                        </el-form-item>
                                        <el-form-item label="所在分组" prop="group_no">
                                        <el-select v-model="setupUpdateCsmID" placeholder="请选择分组，默认不分组" style="width:100%">
                                                <el-option
                                                v-for="item in setupCsmOptions"
                                                :key="item.group_no"
                                                :label="item.g_name"
                                                :value="item.group_no">
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-form>
                                    <div slot="footer" class="dialog-footer">
                                    <el-button @click="dialogupdatecsm = false">取 消</el-button>
                                    <el-button type="primary" @click="updatecsmsj('update_csm')">确 定</el-button
                                    >
                                    </div>
                                </el-dialog>
                </div>
                                
            </el-row>
            <el-row style="margin-top:20px">
                    <div class="block">
                       <el-button style="float:right;margin-left:20px" size="small">确定</el-button>
                        <el-pagination  
                             @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            style="float: right"
                            background
                            :page-sizes="[10, 20, 30, 40]"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :current-page="currentPage"
                            :total="setupCsmData.length"
                          >
                        </el-pagination>
                      
                       
                    </div>
            </el-row>
       
        </div>
    </div>
</template>
<style scoped>
#search {
padding: 11px;
  background-color: #0170f3;
  border-radius: 0%;
  color: #ffffff;
 
} 
.el-button{
    padding: 12px 12px;
    border-radius: 0px;
}

</style>
<script>
import Open from "./Open.vue"
import {mapState} from 'vuex'
export default {
    name:"CustomerServiceManagement",
    data(){
        return {
            status:"1",
            //添加的框
            dialogaddcsm:false,
            //删除确认框
            dialogdeletecsm:false,
            //修改框
            dialogupdatecsm:false,
            //添加时分组选中
            setupAddCsmID:0,
            //修改分组时
            setupUpdateCsmID:"",
            //筛选时选中
            setupCsm:"",
            //删除使用的下标
            delteid:"",
            //修改使用的下标
            updateid:"",
            //搜索框的内容
            search:"",
            //翻页一页显示多少数据设置的默认值
            pageSize:10,
            //现在是第几页刚开始显示的默认值
            currentPage:1,
            //添加客服的
            addcsm:{
                c_s_nickname:"",
                c_s_name:"",
                c_s_account:"",
                c_s_password:"",
                group_no:0

            },
            //添加框的规则
            addrules:{
                c_s_nickname:[
                    { required: true, message: '请输入您的昵称', trigger: 'blur' }
                ],
                c_s_name:[
                    { required: true, message: '请输入您的真实姓名', trigger: 'blur' }
                ],
                c_s_account:[
                    { required: true, message: '请设置账号', trigger: 'blur' }
                ],
                c_s_password:[
                    { required: true, message: '请设置初始密码', trigger: 'blur' }
                ],
              
            },
            //搜索框的规则
            updaterules:{
                 c_s_nickname:[
                    { required: true, message: '请输入您的昵称', trigger: 'blur' }
                ],
                c_s_name:[
                    { required: true, message: '请输入您的真实姓名', trigger: 'blur' }
                ],
                c_s_account:[
                    { required: true, message: '请设置账号', trigger: 'blur' }
                ],
                c_s_password:[
                    { required: true, message: '请设置初始密码', trigger: 'blur' }
                ],
            }
        }
    },
     computed:{

         ...mapState("SetupModule",["setupCsmOptions","setupCsmData","setupCsmUpdate"])
     },
    components:{
        Open
    },
    methods:{
        //添加客服
        addcsmsj(formName){
             this.$refs[formName].validate((valid) => {
                if (valid) {
                    //alert('submit!');
                    this.addcsm.group_no = this.setupAddCsmID
                    
                this.$store.dispatch("SetupModule/csmadd", this.addcsm)
                this.dialogaddcsm = false; //关闭弹出框
                } else {
                    this.$message({
                        showClose: true,
                        message: '请把内容完善',
                        type: 'error'
                    });
                }
            });
        },

        deletecsm(){
            this.$store.dispatch('SetupModule/deletecsm',this.delteid);
             this.dialogdeletecsm = false

        },
        deletecsmid(i){
            this.dialogdeletecsm = true
            this.delteid = i
        },
        updatecsmid(i){
            this.dialogupdatecsm = true
            this.$store.commit('SetupModule/updatecsm',i);
            this.updateid = i
            this.setupUpdateCsmID = this.setupCsmUpdate.group_no
            
            //console.log( this.setupUpdateCsmID,i);
        },
        updatecsmsj(formName){
             this.$refs[formName].validate((valid) => {
            if (valid) {
                //alert('submit!');
                this.setupCsmUpdate.group_no = this.setupUpdateCsmID
                //console.log( this.setupUpdateCsmID);
            this.$store.dispatch("SetupModule/updatecsm", this.setupCsmUpdate)
            this.dialogupdatecsm = false; //关闭弹出框
            } else {
                this.$message({
                    showClose: true,
                    message: '请把内容完善',
                    type: 'error'
                });
            }
            });
        },
        //搜索
        searchsj(){
           
             this.$store.dispatch("SetupModule/searchcsm",  this.search)
        },

        //翻页器
        //这是修改当前页面显示多少条数据
        handleSizeChange: function (size) {
            this.pageSize = size;
            console.log("这是上面的"+this.pageSize);
        },
        //这是点击多少页时发生的
        handleCurrentChange: function(currentPage){
            this.currentPage = currentPage;
            console.log("这是下面的"+this.currentPage);
        }
        
    },
    mounted(){
        this.$store.dispatch('SetupModule/csmall',{status:this.status});
        this.$store.dispatch('SetupModule/csmgroup',{status:this.status});
    },
    watch:{
        search:function(){  
            if(this.search === ""){
                this.$store.dispatch('SetupModule/csmall',{status:this.status});
            }
        }
    }
}
</script>